<template>
    <div class="table">
        <el-table
            :data="tabledata"
            border
            stripe
            style="width: 100%; margin: 1em 0"
            v-loading="loading"
            element-loading-text="加载中..."
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
        >
            <el-table-column
                v-for="(title, t) in tableTitle"
                :key="t"
                show-overflow-tooltip
                :prop="title.prop"
                :label="title.label"
                :align="title.align != null ? title.align : 'center'"
                :width="title.width"
            />
            <el-table-column fixed="right" label="操作">
                <template #default="scope">
                    <el-button
                        @click="deleteRow(scope.$index, scope.row)"
                        type="text"
                        size="small"
                    >
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import { reactive, onBeforeMount, toRefs } from "vue";
// import {getAllDevices} from '@/api/device'
// import {ElMessage} from 'element-plus'

export default {
    setup() {
        const state = reactive({
            tabledata: [],
            loading: false,
            tableTitle: [
                { prop: "id", label: "设备ID" },
                { prop: "managementAdress", label: "控制器地址" },
                { prop: "portnum", label: "端口数量" },
                { prop: "version", label: "协议版本" }
            ]
        });

        const getDataList = async () => {
            const res = await VE_API.system.deviceList();
            console.log("res: ", res);
            state.loading = false;
            let data = res.devices.map(item => {
                return {
                    id: item.id,
                    managementAdress: item.annotations.managementAddress,
                    portnum: 0,
                    version: item.sw
                };
            });
            state.tabledata = data;
        };

        onBeforeMount(async () => {
            await getDataList();
        });

        function deleteRow(index, row) {
            console.log(index, row, "params");
        }

        function tableMinHeight() {
            return window.innerHeight - 156;
        }

        return {
            deleteRow,
            tableMinHeight,
            ...toRefs(state)
        };
    }
};
</script>

<style lang="less"></style>
